---
title: Usando variables de entorno
description: Aprende a usar variables de entorno en un proyecto de Astro.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


Astro usa Vite para el manejo de las variables de entorno el cual te permite [usar cualquiera de sus métodos](https://vitejs.dev/guide/env-and-mode.html).

Ten en cuenta que _todas_ las variables de entorno estarán disponibles en el servidor, mientras que solo las variables de entorno con el prefijo `PUBLIC_` estarán disponibles en el cliente por motivos de seguridad.

```ini title=".env"
SECRET_PASSWORD=contraseña123
PUBLIC_ANYBODY=ahí
```

En este ejemplo, `PUBLIC_ANYBODY` (accesible mediante `import.meta.env.PUBLIC_ANYBODY`) estará disponible tanto en el servidor como el cliente, mientras que `SECRET_PASSWORD` (accesible mediante `import.meta.env.SECRET_PASSWORD`) estará disponible solo en el servidor.

:::caution
Los archivos `.env` no son cargados dentro de [archivos de configuración](/es/guides/configuring-astro/#variables-de-entorno).
:::

## Variables de entorno predeterminadas

Astro incluye algunas variables de entorno por defecto:

- `import.meta.env.MODE`: El modo en el que se ejecuta tu proyecto. Esto es `development` al ejecutar `astro dev` y `production` al ejecutar `astro build`.
- `import.meta.env.PROD`: `true` si tu proyecto se está ejecutando en producción; `false` en caso contrario.
- `import.meta.env.DEV`: `true` si tu proyecto se está ejecutando en desarrollo; `false` en caso contrario. Siempre lo contrario de `import.meta.env.PROD`.
- `import.meta.env.BASE_URL`: La URL base desde la que se sirve tu proyecto. Esto está determinado por la opción de configuración [`base`](/es/reference/configuration-reference/#base).
- `import.meta.env.SITE`: Esto se establece en [la opción `site`](/es/reference/configuration-reference/#site) especificada en `astro.config` de tu proyecto.
- `import.meta.env.ASSETS_PREFIX`: El prefijo para los enlaces de activos generados por Astro si se establece la [opción de configuración `build.assetsPrefix`](/es/reference/configuration-reference/#buildassetsprefix). Esto se puede usar para crear enlaces de activos no manejados por Astro.

Úsalas como cualquier otra variable de entorno.

```ts utils.ts
const isProd = import.meta.env.PROD;
const isDev = import.meta.env.DEV;
```

## Configurando variables de entorno

### Archivos `.env`

Las variables de entorno se pueden cargar desde los archivos `.env` en la raíz de tu proyecto.

También puedes adjuntar un modo (ya sea `production` o `development`) al nombre del archivo, como `.env.production` o `.env.development`, lo que hace que las variables de entorno solo tengan efecto en ese modo.

Simplemente crea un archivo `.env` en la raíz de tu proyecto y agrega algunas variables.

```ini title=".env"
# ¡Esto solo estará disponible cuando se ejecute en el servidor!
DB_PASSWORD="foobar"
# ¡Estará disponible en todas partes!
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"
```

Para obtener más información sobre los archivos `.env`, consulta la [documentación de Vite](https://vitejs.dev/guide/env-and-mode.html#env-files).

### Usando la CLI

También puedes agregar variables de entorno a medida que ejecuta su proyecto:

<PackageManagerTabs>
 <Fragment slot="yarn">
    ```shell
    PUBLIC_POKEAPI=https://pokeapi.co/api/v2 yarn run dev
    ```
 </Fragment>
 <Fragment slot="npm">
    ```shell
    PUBLIC_POKEAPI=https://pokeapi.co/api/v2 npm run dev
    ```
 </Fragment>
 <Fragment slot="pnpm">
    ```shell
    PUBLIC_POKEAPI=https://pokeapi.co/api/v2 pnpm run dev
    ```
 </Fragment>
</PackageManagerTabs>

## Obteniendo variables de entorno

En Astro se accede a las variables de entorno con import.meta.env, utilizando la [característica import.meta añadida en ES2020](https://tc39.es/ecma262/2020/#prod-ImportMeta), en lugar de process.env.

Por ejemplo, usa `import.meta.env.PUBLIC_POKEAPI` para obtener la variable de entorno `PUBLIC_POKEAPI`.

```js /(?<!//.*)import.meta.env.[A-Z_]+/
// Cuando import.meta.env.SSR === true
const data = await db(import.meta.env.DB_PASSWORD);

// Cuando import.meta.env.SSR === false
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);
```

Cuando se utiliza SSR, se puede acceder a las variables de entorno en tiempo de ejecución en función del adaptador SSR que se esté utilizando. Con la mayoría de los adaptadores puedes acceder a las variables de entorno con `process.env`, pero algunos adaptadores funcionan de forma diferente. Para el adaptador Deno, utilizará `Deno.env.get()`. Mira cómo [acceder al runtime de Cloudflare](/es/guides/integrations-guide/cloudflare/#tiempo-de-ejecución-de-cloudflare) para manejar las variables de entorno cuando utilices el adaptador de Cloudflare. Astro comprobará primero el entorno del servidor en busca de variables, y si no existen, Astro las buscará en los archivos .env.

## IntelliSense para TypeScript

De forma predeterminada, Vite proporciona una definición de tipos para `import.meta.env` en `astro/client.d.ts`.

Si bien puedes definir más variables de entorno personalizadas en los archivos `.env.[mode]`, es posible que desees obtener TypeScript IntelliSense para las variables de entorno definidas por el usuario que tienen el prefijo `PUBLIC_`.

Para lograr esto, puedes crear un archivo `env.d.ts` en `src/` y configurar `ImportMetaEnv` así:

```ts title="src/env.d.ts"
interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // más variables de entorno...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```
